<template>
  <div>
    <!-- 航路航线 -->
    <div v-for="airRoute in currentAirRoutes" :key="airRoute.key">
      <!-- 起点 -->
      <StartPoint
        :data="airRoute"
        :showLine="lineVisible"
        :showLogo="portVisible"
        v-if="routeVisible"
      />
      <!-- 航线 -->
      <Line :data="airRoute" :showLine="lineVisible" v-if="routeVisible" />
      <!-- 终点 -->
      <EndPoint
        :data="airRoute"
        :showLine="lineVisible"
        :showLogo="portVisible"
        v-if="routeVisible"
      />
    </div>

    <!-- 绘制航路 -->
    <Drawings ref="drawings" />

    <el-dialog
      v-model="dialogVisible"
      title="请选择要显示的航路/航线"
      :closed="handleClose"
      width="800"
      top="14vh"
      class="airroute-show-d"
    >
      <el-table
        :data="airRoutes"
        @selection-change="handleSelectionChange"
        row-class-name="airroute-show-row"
        cell-class-name="airroute-show-cell"
        header-row-class-name="airroute-show-header"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          property="startName"
          label="起飞点名称"
          show-overflow-tooltip
        />
        <el-table-column
          property="startPoint"
          label="起飞点坐标"
          show-overflow-tooltip
          :formatter="handleFormatter"
          class="startPoint"
        />
        <el-table-column
          property="endName"
          label="降落点名称"
          show-overflow-tooltip
        />
        <el-table-column
          property="endPoint"
          label="经络点坐标"
          show-overflow-tooltip
          :formatter="handleFormatter"
        />
        <el-table-column
          property="lineHeight"
          label="航线高度（m）"
          show-overflow-tooltip
        />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn" @click="handleClose">取消</el-button>

          <div class="primary-btn" @click="handleConfirm">确定</div>
          <!-- <el-button type="primary" @click="handleConfirm">确定</el-button> -->
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api";

import StartPoint from "./StartPoint.vue";
import EndPoint from "./EndPoint.vue";
import Line from "./Line.vue";
import Drawings from "./Drawings.vue";

const props = defineProps({
  routeVisible: Boolean,
  lineVisible: Boolean,
  portVisible: Boolean,
});

const emits = defineEmits(["change"]);

const { routeVisible, lineVisible, portVisible } = toRefs(props);

const drawings = ref(null);
const airRoutes = ref([]);
const currentAirRoutes = ref([]);
const selectedAirRoutes = ref([]);
const dialogVisible = ref(false);

watch(routeVisible, (newState, oldState) => {
  if (newState) {
    selectedAirRoutes.value = [];
    currentAirRoutes.value = [];
    dialogVisible.value = true;
  }
});

watch(
  props,
  (newState, oldState) => {
    if (newState.routeVisible || newState.lineVisible) {
      getAirRoute();
    } else {
      airRoutes.value = [];
    }
  },
  { deep: true }
);

const handleSelectionChange = (selection) => {
  selectedAirRoutes.value = selection;
};

const handleClose = () => {
  dialogVisible.value = false;
  selectedAirRoutes.value = [];
};

const handleConfirm = () => {
  dialogVisible.value = false;
  currentAirRoutes.value = selectedAirRoutes.value;
  selectedAirRoutes.value = [];
};

const handleFormatter = (row, column) => {
  const position = row[column.property];
  return `${position.longitude},${position.latitude}`;
};

const getAirRoute = async () => {
  const result = await api.getAirRoute();
  if (result.code === 200) {
    airRoutes.value = (result.data || []).map((item) => ({
      ...item,
      startPoint: JSON.parse(item.startPoint),
      endPoint: JSON.parse(item.endPoint),
      points: JSON.parse(item.points),
    }));
  } else {
    ElMessage.error(result.msg);
  }
};

// 暴露添加航路操作
defineExpose({
  handleDrawingRoute: () => {
    return drawings.value.handleDrawingRoute();
  },
});
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .el-button {
    width: 3vw;
    height: 3vh;
    border-radius: 3px;
    margin-right: 15px;
    font-size: 1.9vh;
  }
  .primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3vw;
    height: 3vh;
    border-radius: 3px;
    background: url("../../assets/images/button-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    font-family: Microsoft YaHei;
    color: #ffffff;
    font-size: 1.9vh;
  }
  .airroute-show-d,
  .el-table {
    height: 60vh !important;
  }
}
.el-dialog__title {
  font-size: 14px !important;
}
.startPoint {
  .cell {
    text-align: left !important;
  }
}

::v-deep .is-leaf {
  border-color: red;
}
</style>
